<!-- 视频播放器 基于mpegts.js -->
<!-- 主要用于播放flv -->
<template>
	<video :id="props.id" controls></video>
</template>
<script lang="ts" setup name="video-mpegts">
import mpegts from "mpegts.js";
import { nextTick, onBeforeUnmount } from "vue";
const props = defineProps({
	src: {
		type: String,
		default: ""
	},
	id: {
		type: String,
		default: "videoPlayer"
	}
});

nextTick(() => {
	initVideo();
});

onBeforeUnmount(() => {
	destruction();
});

let player: any = null;
function initVideo() {
	if (mpegts.getFeatureList().mseLivePlayback) {
		let videoElement: any = document.getElementById(props.id);
		player = mpegts.createPlayer({
			type: "flv", // could also be mpegts, m2ts, flv
			isLive: true,
			url: props.src
		});
		player.attachMediaElement(videoElement);
		player.load();
		player.play();
	}
}

//销毁对象
function destruction() {
	if (player) {
		player.pause();
		player.destroy();
		player = null;
	}
}
</script>
<style lang="scss" scoped></style>
